<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时间轴</title>
	<script src="framework/jquery-1.10.2.min.js"></script>
	
	<style>
		body {
			font-size: 12px;
			padding: 0;
			margin: 0;
			font-family: 'microsoft yahei';
			min-height: 2000px;
			height: 1000px;	
			/*background-image: url(text.txt); background-attachment: fixed;*/
		}

		#container {
			width: 800px;
			margin: 30px auto;
			position: relative;
		}



		#main-table {
			border-collapse: collapse;
			border: 1px solid #ccc;
			width: 100%;
		}

		#main-table td {
			border: 1px solid #ccc;
			height: 30px;
			line-height: 30px;
			background: #808080;
		}

		#main-table thead td {
			background: #ddd;
			height: 24px;
			line-height: 24px;
		}

		#cutWrapper {
			position: absolute;
			width: 40px;
			height: 100%;
			cursor: pointer;
			z-index:1000;
		}

		#arrowDown {
			height: 0;
			width: 0;
			border: 20px solid transparent;
			border-top: 24px solid blue;
			position: absolute;
			cursor: pointer;
		}

		#lineDown {
			width: 1px;
			background: blue;
			height: 100%;
			position: absolute;
			left: 50%;
			margin-left: -1.5px;
		}

		

		#timeline {
			width: 800px;
			overflow-x: scroll;
			height: 80px;
			position: relative;
			padding-left: 20px;
		}

		#timeline .scaleX {
			position: absolute;
			width: 2px;
			background: #990000;
			bottom: 0;
		}

/*		#timeline .longScale {
			position: absolute;
			height: 30px;
			width: 2px;
			background: #990000;
		}*/
	</style>
	<script type="text/javascript">
		$(function(){
			var flag = false,x = 0;
			var $table = $("#main-table");
			var maxOffset = $table[0].offsetWidth - 46;
			var eventFn = {
				"#cutWrapper mousedown": function(event){
					flag = true;
					x = parseInt(event.clientX)- $("#cutWrapper")[0].offsetLeft;
					$("#cutWrapper").css({"cursor":"move"});
					// console.log("md->x",x,event.clientX,$("#cutWrapper")[0].offsetLeft);
				},
				"body mousemove": function(event){
					if(flag){

						var offset = parseInt(event.clientX) - x;
						// console.log("offset=" + offset);
						if(offset < 0 || offset >= maxOffset) return;
						$("#cutWrapper").css({"left" : offset + "px"});
						$("#cutWrapper").css({"cursor":"move"});
						return false;
					}
					
				},
				"body mouseup": function(event){
					flag = false;
					// $("#cutWrapper").css({"cursor":"none"});
					// console.log("mouseup")
				}
			}

			for(var evt in eventFn){
				var arr = evt.split(" ");
				$(arr[0]).on(arr[1], eventFn[evt]);
			}

			function renderTimeLine(){
				var fragments = document.createDocumentFragment();
				var offsetLeft = 10;
				for(var i = 0;i <= 36000;i++){
					var tempOffsetLeft = i * offsetLeft;
					var div = document.createElement("div");
					
					div.className = "scaleX";
					div.style.left = tempOffsetLeft + "px";
					if(i % 10 == 0){
						div.style.height = "20px";
					}else{
						div.style.height = "5px";
					}
					fragments.appendChild(div);
				}
				document.getElementById("timeline").appendChild(fragments);
			}

			renderTimeLine();
		});

		function TimeLine(){

			this.render = function(options) {

			}
		}


	</script>
</head>
<body>
	<h1>TimeLine</h1>
	<div id="container">
		
		<table id="main-table">
			<thead>
				<tr>
					<td>
						<div id="timeline">
							<div id="cutWrapper">
			<div id="arrowDown"></div>
			<div id="lineDown"></div>
		</div>
						</div>
					</td>
				</tr>
			</thead>
		</table>
	</div>
</body>
</html>